<script setup lang="ts">
import { computed } from 'vue';

const props: any = defineProps<{
    ujt: any;
    id?: any;
    full?: number;
    popstyle?: any;
    maskstyle?: any;
    pass?: any;
}>();
const { $global, $fn } = props.ujt;

// 初始化pop数据
if (!props.id) {
    props.id = 'popdefaultboxconfirmpass';
}
if (!$global.pop[props.id]) {
    $global.pop[props.id] = {};
}
if (!$global.pop[props.id]?.tit) {
    $global.pop[props.id].tit = $fn.lg('asai.confirmpass');
}
if (!$global.pop[props.id]?.pass) {
    $global.pop[props.id].pass = '';
}
if (!$global.pop[props.id]?.btns) {
    $global.pop[props.id].btns = [
        {
            nm: computed(() => $global.lang?.asai?.confirm || 'Confirm'),
            fn: () => {
                if (props.pass && $global.pop[props.id].pass == props.pass) {
                    $global.pop[props.id].fn && $global.pop[props.id].fn();
                    $global.pop[props.id].stat = 0;
                } else {
                    $global.msg.fn({
                        type: 'err',
                        con: $fn.lg('asai.confirmpasserr'),
                    });
                }
            },
        },
        {
            nm: computed(() => $global.lang?.asai?.cancel || 'Cancel'),
            fn: () => {
                $global.pop[props.id].stat = 0;
            },
        },
    ];
}
</script>

<template>
    <PopBox
        :ujt="ujt"
        :id="id"
        :full="full"
        :popstyle="popstyle"
        :maskstyle="maskstyle"
    >
        <slot>
            <div class="as-pop-pass">
                <p>{{ $fn.lg('asai.confirmpassword') }}</p>
                <p>
                    <input
                        type="password"
                        show-password
                        v-model="$global.pop[props.id].pass"
                    />
                </p>
            </div>
        </slot>
    </PopBox>
</template>

<style scoped lang="scss">
.as-pop-pass {
    padding: 8px 12px;
    > p {
        padding: 10px 12px 5px 12px;
        text-align: center;
        font-size: var(--fs3);
        > input {
            border: 2px solid var(--cm6);
            border-radius: 8px;
            width: 88%;
            height: var(--fs4);
            font-size: var(--fs3);
            text-align: center;
        }
    }
}
</style>
